<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>1.子组件和父组件之间的传值 | 森尼的个人博客</title>
    <meta name="generator" content="VuePress 1.5.0">
    
    <meta name="description" content="">
    <link rel="preload" href="/pblog/assets/css/0.styles.8f416918.css" as="style"><link rel="preload" href="/pblog/assets/js/app.44691e48.js" as="script"><link rel="preload" href="/pblog/assets/js/2.0687b84f.js" as="script"><link rel="preload" href="/pblog/assets/js/9.ac42b5ff.js" as="script"><link rel="prefetch" href="/pblog/assets/js/3.21da0dec.js"><link rel="prefetch" href="/pblog/assets/js/4.23e05225.js"><link rel="prefetch" href="/pblog/assets/js/5.abf5f534.js"><link rel="prefetch" href="/pblog/assets/js/6.54cb6cbe.js"><link rel="prefetch" href="/pblog/assets/js/7.82f234f2.js"><link rel="prefetch" href="/pblog/assets/js/8.5f1bb801.js">
    <link rel="stylesheet" href="/pblog/assets/css/0.styles.8f416918.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/pblog/" class="home-link router-link-active"><img src="/pblog/assets/img/jienigui.jpg" alt="森尼的个人博客" class="logo"> <span class="site-name can-hide">森尼的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/pblog/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/pblog/guide/" class="nav-link">
  Guide
</a></div><div class="nav-item"><a href="/pblog/computer/" class="nav-link">
  计算机
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/html/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  HTML
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/es6/" class="nav-link">
  ES6
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><a href="https://gitee.com/jackson01" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://www.cnblogs.com/jackson1/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Cnblog
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/pblog/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/pblog/guide/" class="nav-link">
  Guide
</a></div><div class="nav-item"><a href="/pblog/computer/" class="nav-link">
  计算机
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/html/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  HTML
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/es6/" class="nav-link">
  ES6
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pblog/language/chinese/" class="nav-link">
  Chinese
</a></li><li class="dropdown-item"><!----> <a href="/pblog/language/japanese/" class="nav-link">
  Japanese
</a></li></ul></div></div><div class="nav-item"><a href="https://gitee.com/jackson01" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://www.cnblogs.com/jackson1/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Cnblog
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="_1-子组件和父组件之间的传值"><a href="#_1-子组件和父组件之间的传值" class="header-anchor">#</a> 1.子组件和父组件之间的传值</h2> <h4 id="子组件传给父组件：-用事件的方式"><a href="#子组件传给父组件：-用事件的方式" class="header-anchor">#</a> 子组件传给父组件： 用事件的方式</h4> <p><img src="https://img-blog.csdnimg.cn/20200417124056623.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"> <img src="https://img-blog.csdnimg.cn/20200417124110693.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p> <h4 id="同文件子组件之间的传值"><a href="#同文件子组件之间的传值" class="header-anchor">#</a> 同文件子组件之间的传值</h4> <p>利用父组件作为中介，来单向流的进行传递
<img src="https://img-blog.csdnimg.cn/20200417124209308.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p> <h4 id="不同文件子组件之间的传值（例如跟组件中不同的组件，不方便在跟组件中书写逻辑代码）【bus】"><a href="#不同文件子组件之间的传值（例如跟组件中不同的组件，不方便在跟组件中书写逻辑代码）【bus】" class="header-anchor">#</a> 不同文件子组件之间的传值（例如跟组件中不同的组件，不方便在跟组件中书写逻辑代码）【Bus】</h4> <p>可以利用 <strong>Bus</strong>来进行传值 （Bus就是一个新的Vue实例对象，挂载到全局Vue原原型对象上，这样就可以在根组件监听这个Bus数据状态的变化进行值的发送与接受）
<img src="https://img-blog.csdnimg.cn/20200417124526793.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p> <h2 id="_2-vuex状态管理"><a href="#_2-vuex状态管理" class="header-anchor">#</a> 2.Vuex状态管理</h2> <h4 id="vuex工作的流程"><a href="#vuex工作的流程" class="header-anchor">#</a> Vuex工作的流程</h4> <p><img src="https://img-blog.csdnimg.cn/20200417124816596.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p> <h4 id="vuex结构"><a href="#vuex结构" class="header-anchor">#</a> Vuex结构</h4> <p><img src="https://img-blog.csdnimg.cn/20200417170056225.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"> <img src="https://img-blog.csdnimg.cn/20200417170250957.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p> <h4 id="state属性相当于（data属性）"><a href="#state属性相当于（data属性）" class="header-anchor">#</a> ------State属性相当于（data属性）</h4> <p>在state.js中定义，在index.js中引入</p> <h5 id="组件中获得定义在state-中值-的第一种方式"><a href="#组件中获得定义在state-中值-的第一种方式" class="header-anchor">#</a> 组件中获得定义在state 中值 的第一种方式</h5> <p><img src="https://img-blog.csdnimg.cn/20200417170826952.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p> <h5 id="组件中过去定义在state-中值-的第二方式（通过mapstate）"><a href="#组件中过去定义在state-中值-的第二方式（通过mapstate）" class="header-anchor">#</a> 组件中过去定义在state 中值 的第二方式（通过mapState）</h5> <p><img src="https://img-blog.csdnimg.cn/20200417171348117.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p> <h5 id="可以为模块开启命名空间（方便访问）"><a href="#可以为模块开启命名空间（方便访问）" class="header-anchor">#</a> 可以为模块开启命名空间（方便访问）</h5> <p><img src="https://img-blog.csdnimg.cn/20200417172451524.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
1.
<img src="https://img-blog.csdnimg.cn/20200417172832791.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
2.
<img src="https://img-blog.csdnimg.cn/20200417172913517.png" alt="在这里插入图片描述"></p> <h4 id="getters属性相当于（computed属性）"><a href="#getters属性相当于（computed属性）" class="header-anchor">#</a> ------getters属性相当于（computed属性）</h4> <p>getters模块的定义格式如下
<img src="https://img-blog.csdnimg.cn/20200417174630201.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p> <h5 id="组件中获得定义在getters-中值-的第一种方式"><a href="#组件中获得定义在getters-中值-的第一种方式" class="header-anchor">#</a> 组件中获得定义在getters 中值 的第一种方式</h5> <p><img src="https://img-blog.csdnimg.cn/20200417174655464.png" alt="·"></p> <h5 id="组件中获得定义在getter-中值-的第二种方式（利用mapgetters）"><a href="#组件中获得定义在getter-中值-的第二种方式（利用mapgetters）" class="header-anchor">#</a> 组件中获得定义在getter 中值 的第二种方式（利用mapGetters）</h5> <ol><li></li></ol> <p><img src="https://img-blog.csdnimg.cn/20200417175925296.png" alt="在这里插入图片描述">
2.
<img src="https://img-blog.csdnimg.cn/20200417175949595.png" alt="在这里插入图片描述">
3.
<img src="https://img-blog.csdnimg.cn/20200417180000812.png" alt="在这里插入图片描述"></p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/pblog/assets/js/app.44691e48.js" defer></script><script src="/pblog/assets/js/2.0687b84f.js" defer></script><script src="/pblog/assets/js/9.ac42b5ff.js" defer></script>
  </body>
</html>
